/**
 * ext-helloworld.js
 *
 * @license MIT
 *
 * @copyright 2010 Alexis Deveria
 *
 */

/**
 * This is a very basic SVG-Edit extension. It adds a "Hello World" button in
 *  the left ("mode") panel. Clicking on the button, and then the canvas
 *  will show the user the point on the canvas that was clicked on.
 */
export default {
  name: 'helloworld',
  async init({ $, importLocale }) {
    // See `/editor/extensions/ext-locale/helloworld/`
    const strings = await importLocale();
    const svgEditor = this;
    const svgCanvas = svgEditor.canvas;

    let selElems;


    const titleButton = {
      id: 'hello_world',
      icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
      type: 'context',
      title: strings.buttons[0].title,
      panel: 'helloworld_panel',
      events: {
        click() {
          svgCanvas.addSVGElementFromJson({
            element: 'text',
            attr: { x: 30, y: 30 },
            children: ['标题增加一个标题']
          });
        }
      }
    };

    const optionButton = {
      id: 'hello_world',
      icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
      type: 'context',
      title: strings.buttons[0].title,
      panel: 'helloworld_panel',
      events: {
        click() {
          let count = $("text[post-option='0']").length;
          svgCanvas.addSVGElementFromJson({
            element: 'text',
            attr: { x: (count * 130 + 60) ,y: 80, 'post-option': '0' },
            children: [(1+count) + '选项']
          });
        }
      }
    };

    const choiceButton = {
      id: 'hello_world',
      icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
      type: 'mode',
      title: strings.buttons[0].title,
      // panel: 'helloworld_panel',
      events: {
        click() {
          $('#selected_panel').hide();
          $('#text_panel').hide();
          $('#helloworld_panel').show();

          // svgCanvas.setMode("tool_select")
        }
      }
    };

    const answerArea = {
      id: 'hello_world',
      icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
      type: 'context',
      title: strings.buttons[0].title,
      panel: 'helloworld_panel',
      events: {
        click() {
          const selElement = svgEditor.canvas.getSelectedElems()[0];
          if (selElement) {
            $(selElement).append("(<tspan answer-area='0' />)");
            svgCanvas.clearSelection();
          }
        }
      }
    };

    const buttons = [titleButton, optionButton, choiceButton , answerArea];
    const contextTools = [];

    return {
      name: strings.name,
      // For more notes on how to make an icon file, see the source of
      // the helloworld-icon.xml
      svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',
      buttons,
      context_tools: contextTools,
      callback() {
        // $('#helloworld_panel').show();
      },
      selectedChanged(opts){
          // $('#selected_panel')?.hide();
          // $('#text_panel')?.hide();
      }
    };
  }
};
